<script setup>
import { ref } from 'vue'
import { SelectedCourseDelService, SelectedCourselistGetInfoService } from '@/api/SelectedCourse.js'
import PageContainer from '@/components/PageContainer.vue'
import { Delete } from '@element-plus/icons-vue'

const SelectedCourselist = ref([])

const delModel = ref({
  id: '',
  className: '',
  teacher: '',
  room: '',
  capacity: ''
})

const getSelectedCourselist = async () => {
  const res = await SelectedCourselistGetInfoService()
  SelectedCourselist.value = res.data.data
  console.log(SelectedCourselist.value)
}
getSelectedCourselist()

const onDelSelectedCourse = async (row) => {
  console.log(row.id)
  delModel.value = row
  await SelectedCourseDelService(delModel.value)
  alert("已选课程删除成功")
  await getSelectedCourselist()
}
</script>

<template>
  <page-container title="已选课程查看">
    <el-table :data="SelectedCourselist" style="width: 100%">
      <el-table-column label="课程编号" width="200" prop="id"> </el-table-column>
      <el-table-column label="课程名称" prop="className"></el-table-column>
      <el-table-column label="授课老师" prop="teacher"></el-table-column>
      <el-table-column label="授课地点" prop="room"></el-table-column>
      <el-table-column label="课堂容量" prop="capacity"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelSelectedCourse(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </page-container>
</template>

<style lang="scss" scoped></style>
